<template>
  <div class="home">
    <div class="top-content">
      <div class="calendar">
        <el-calendar v-model="value" class=""> </el-calendar>
      </div>

      <div class="info-message">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>您好，{{ userInfo.userName ?? "" }}</span>
          </div>
        </el-card>
      </div>
    </div>
    <div class="bottom-content">
      <div class="collapse">
        <el-collapse accordion>
          <el-collapse-item v-for="(item, index) in messageData" :key="index">
            <template slot="title">
              <span class="name" style="margin-left:30px; font-size:17px"> {{item.projectName}}</span>
              <span class="time" style="margin-left:100px; font-size:17px">{{(item.insertTime + '').slice(0,10)}}</span>
              <span class="info" style="margin-left:100px"><i class="el-icon-info" style="color:#2d62a3;font-size:23px"></i>点击查看详情</span>
            </template>
            <div>
              项目：{{item.projectName}}，审核为：{{item.projectState}}
            </div>
            </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { A_message } from "@/api/home/index";
export default {
  name: "home",
  data() {
    return {
      value: new Date(),
      messageData: [],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      const result = await A_message();
      this.messageData = result.data;
    },
  },
  computed: {
    ...mapState("myInfo", ["userInfo"]),
  },
};
</script>

<style lang="less" >
.home {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  .top-content {
    display: flex;
    width: 100%;
    height: 320px;
    .calendar {
      width: 300px;
      height: 320px;
      border-right: 1px solid rgb(215, 209, 209);
      box-shadow: 3px 3px 3px #eee;

      .el-button--mini,
      .el-button--mini.is-round {
        padding: 7px 7px;
        background-color: #bccadc;
      }
      .el-calendar__body {
        background-color: #ffffff;
        padding: 12px 20px 5px 20px;
        thead {
          background-color: #f0f5fa;
          color: #2f3749;

          th {
            padding: 5px 0;
          }
        }

        .el-calendar-table td.is-selected {
          background-color: #5788ff;
          color: #fff;
          &:hover {
            color: #2f3749;
            background-color: #2c67ff;
          }
        }
        .el-calendar-table {
          td {
            border-radius: 50%;
            border: none;
            width: 40px;
            height: 37px;
            text-align: center;
            line-height: 37px;
            color: #666666;
          }
          .el-calendar-day {
            padding: 0;
            height: 37px;
          }
        }
      }
      .name {
        margin-left: 20px;
      }
    }
    .info-message {
      margin-left: 10px;
      flex: 1;
      box-shadow: 3px 3px 3px #eee;
      background-color: #ffffff;
    }
  }
  .bottom-content {
    margin-top: 20px;
    max-height: 300px;
    box-shadow: 3px 3px 3px rgba(238, 238, 238, 0.859);
    .collapse {
      .time {
        margin-left: 50px;
      }
    }
  }
}
</style>